<template>
  <div v-show="props.compType === 'upload'">
    <el-collapse v-model="activePanels">
    <!-- 基础信息 -->
    <el-collapse-item title="基础配置" name="basic">
      <el-form-item label="ID">
      <el-tooltip
        class="item"
        effect="dark"
        content="请注意,ID的修改可能会导致该组件相关事件失效！"
        placement="left"
       
      >
        <el-input class="input" v-model="props.id" disabled @change="handlerChangeGetId"></el-input>
      </el-tooltip>
    </el-form-item>
      <el-form-item label="组件标签">
        <el-input v-model="props.label" />
      </el-form-item>
      <el-form-item label="上传地址">
        <el-input v-model="props.action" placeholder="请输入完整API地址" />
      </el-form-item>
    </el-collapse-item>

    <!-- 文件控制 -->
    <el-collapse-item title="文件控制" name="file-control">
      <el-form-item label="接受文件类型">
        <el-select 
          v-model="props.accept" 
          multiple 
          collapse-tags 
          style="width:100%"
        >
          <el-option label="图片(image/*)" value="image/*" />
          <el-option label="PDF(.pdf)" value=".pdf" />
          <el-option label="Word(.doc,.docx)" value=".doc,.docx" />
          <el-option label="Excel(.xls,.xlsx)" value=".xls,.xlsx" />
        </el-select>
      </el-form-item>
      <el-form-item label="单文件大小(MB)">
        <el-input-number 
          v-model="props.fileSize" 
          :min="1" 
          :max="1024" 
          :step="5" 
        />
      </el-form-item>
      <el-form-item label="最大上传数量">
        <el-input-number 
          v-model="props.maxCount" 
          :min="0" 
          :max="100"
          :disabled="!props.multiple"
        />
      </el-form-item>
    </el-collapse-item>

    <!-- 展示设置 -->
    <el-collapse-item title="展示设置" name="display">
      <el-form-item label="列表类型">
        <el-radio-group v-model="props['list-type']">
          <el-radio-button label="text">列表模式</el-radio-button>
          <el-radio-button label="picture">缩略图列表</el-radio-button>
          <el-radio-button label="picture-card">卡片模式</el-radio-button>
        </el-radio-group>
      </el-form-item>
      
      <template v-if="props['list-type'] !== 'text'">
        <el-form-item label="启用图片预览">
          <el-switch v-model="props.preview" />
        </el-form-item>
        <el-form-item label="生成缩略图">
          <el-switch v-model="props.thumbnails" />
        </el-form-item>
        <el-form-item label="预览图宽度">
          <el-input-number 
            v-model="props.previewSize.width" 
            :min="50" 
            :max="500" 
          />
        </el-form-item>
        <el-form-item label="预览图高度">
          <el-input-number 
            v-model="props.previewSize.height" 
            :min="50" 
            :max="500" 
          />
        </el-form-item>
      </template>
      
      <el-form-item label="显示文件列表">
        <el-switch v-model="props['show-file-list']" />
      </el-form-item>
    </el-collapse-item>

    <!-- 功能开关 -->
    <el-collapse-item title="功能开关" name="features">
      <el-form-item label="多选上传">
        <el-switch v-model="props.multiple" />
      </el-form-item>
      <el-form-item label="拖拽上传">
        <el-switch v-model="props.dragUpload" />
      </el-form-item>
      <el-form-item label="分片上传">
        <el-switch v-model="props.chunkUpload" />
      </el-form-item>
      <el-form-item label="分片大小(MB)" v-if="props.chunkUpload">
        <el-input-number 
          v-model="props.chunkSize" 
          :min="1" 
          :max="20" 
        />
      </el-form-item>
      <el-form-item label="跨域认证">
        <el-switch v-model="props.withCredentials" />
      </el-form-item>
      <el-form-item label="必填项">
        <el-switch v-model="props.required" />
      </el-form-item>
    </el-collapse-item>

    <!-- 提示信息 -->
    <el-collapse-item title="提示信息" name="tips">
      <el-form-item label="显示提示">
        <el-switch v-model="props.showTip" />
      </el-form-item>
      <el-form-item label="提示内容" v-if="props.showTip">
        <el-input 
          v-model="props.tips" 
          type="textarea" 
          :rows="2" 
        />
      </el-form-item>
      <el-form-item label="按钮文字">
        <el-input v-model="props.buttonText" />
      </el-form-item>
    </el-collapse-item>

    <!-- 布局设置 -->
    <el-collapse-item title="布局设置" name="layout">
      <el-form-item label="标签宽度">
        <el-input-number 
          v-model="props.labelWidth" 
          :min="0" 
          :max="300" 
        />
      </el-form-item>
      <el-form-item label="栅格占比">
        <el-slider 
          v-model="props.span" 
          :min="1" 
          :max="24" 
          :marks="{12: '', 24: '100%'}" 
        />
      </el-form-item>
      <el-form-item label="组件宽度(%)">
        <el-input-number 
          v-model="props.width" 
          :min="10" 
          :max="100" 
        />
      </el-form-item>
    </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import { changeId } from '../mixin/FormDesignerMixin'

export default defineComponent({
  name: 'upload-config',
  
  mixins: [changeId],
  props: {
    props: {
      type: Object,
      required: true
    },
    handlerChangeIdCallback: Function
  },  
  setup(props){
    const activePanels = ref(['basic', 'file-control']) // 默认展开前两项
    const handlerChangeGetId = (val: any) =>{
      if (props.handlerChangeIdCallback) {
        props.handlerChangeIdCallback(val)
      }
    }
    return{
      handlerChangeGetId,
      activePanels
    }
  }

})
</script>

<style scoped>
.el-input-number, .el-slider {
  width: 100%;
}
.input {
  width: 75%;
}
</style>